<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>xxxxx</title>
    <link rel="stylesheet" href="./style.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,900' rel='stylesheet' type='text/css'>
</head>
<body translate="no">
<div class="container">
    <header>
        <h1>SVG clip-path Hover Effect</h1>
        <p>
            Attempt to re-create <a href="http://www.cjgammon.com/" target="_blank">CJ Gammon’s</a>
            portfolio grid hover effect using SVG and CSS Transitions.
        </p>
        <p class="small">
            <b>Note:</b> this is an experiment, it does not seem to work on Firefox 43.0.4
            neither have touch support.
            <br>Tested on Chrome 47.0.2526.106, Opera 34.0 and Safari 8.0.6.
        </p>
    </header>
    <main>
        <div class="items">
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-0">
                            <circle cx="219.5" cy="12.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        X-rays
                    </text>
                    <g clip-path="url(#clip-0)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-xrays.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            X-rays
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-1">
                            <circle cx="150.5" cy="1.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        Worms
                    </text>
                    <g clip-path="url(#clip-1)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-worms.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            Worms
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-2">
                            <circle cx="228.5" cy="5.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        Aurora
                    </text>
                    <g clip-path="url(#clip-2)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-aurora.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            Aurora
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-3">
                            <circle cx="0" cy="0" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        Angus
                    </text>
                    <g clip-path="url(#clip-3)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-angus.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            Angus
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-4">
                            <circle cx="0" cy="0" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        Huitzi
                    </text>
                    <g clip-path="url(#clip-4)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-huitzi.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            Huitzi
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-5">
                            <circle cx="153.5" cy="184.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        Dalí
                    </text>
                    <g clip-path="url(#clip-5)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-dali.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            Dalí
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-6">
                            <circle cx="163.5" cy="170.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        The Bride
                    </text>
                    <g clip-path="url(#clip-6)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-bride.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            The Bride
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-7">
                            <circle cx="221.5" cy="148.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        The Man
                    </text>
                    <g clip-path="url(#clip-7)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-man.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            The Man
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-8">
                            <circle cx="139.5" cy="164.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        D
                    </text>
                    <g clip-path="url(#clip-8)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-d.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            D
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-9">
                            <circle cx="263.5" cy="178.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        V
                    </text>
                    <g clip-path="url(#clip-9)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-v.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            V
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-10">
                            <circle cx="221.5" cy="19.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        V II
                    </text>
                    <g clip-path="url(#clip-10)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-v2.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            V II
                        </text>
                    </g>
                </svg>
            </div>
            <div class="item">
                <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
                    <defs>
                        <clipPath id="clip-11">
                            <circle cx="3.5" cy="107.15625" fill="#000" r="150px"></circle>
                        </clipPath>
                    </defs>
                    <text class="svg-text" dy=".3em" x="50%" y="50%">
                        V III
                    </text>
                    <g clip-path="url(#clip-11)">
                        <image height="100%" preserveAspectRatio="xMinYMin slice" width="100%" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-v3.png"></image>
                        <text class="svg-masked-text" dy=".3em" x="50%" y="50%">
                            V III
                        </text>
                    </g>
                </svg>
            </div>
        </div>
    </main>
</div>
<div class="options">
    <button class="dark"></button>
    <button class="light"></button>
</div>

</body>
<script src="script.js"></script>
</html>